<template>
  <bazi-section title="藏干个数">
    <view class="liuqin-containter" v-if="isVip != 1">
      <view class="liuqin-table">
        <view class="th">
          <view class="th-item">年柱</view>
          <view class="th-item">月柱</view>
          <view class="th-item">日柱</view>
          <view class="th-item">时柱</view>
        </view>
        <view class="tr">
          <view class="tr-item">
            <view class="jx-sizhu" :style="fiveElementInfo(tiangan[0])">{{
              tiangan[0]
            }}</view>
            <view class="jx-type">{{ baziResult.yearGanShiShen }}</view>
          </view>
          <view class="tr-item">
            <view class="jx-sizhu" :style="fiveElementInfo(tiangan[1])">{{
              tiangan[1]
            }}</view>
            <view class="jx-type">{{ baziResult.monthGanShiShen }}</view>
          </view>
          <view class="tr-item">
            <view class="jx-sizhu jx-self" :style="fiveElementInfo(tiangan[2])">{{
              tiangan[2]
            }}</view>
            <view class="jx-type">{{ baziResult.dayGanShiShen }}（日元）</view>
          </view>
          <view class="tr-item">
            <view class="jx-sizhu" :style="fiveElementInfo(tiangan[3])">{{
              tiangan[3]
            }}</view>
            <view class="jx-type">{{ baziResult.timeGanShiShen }}</view>
          </view>
        </view>
        <view class="tr">
          <view class="tr-item tr-dizhi">
            <view class="jx-sizhu" :style="fiveElementInfo(dizhi[0])">{{
              dizhi[0]
            }}</view>
            <view class="jx-type">
              <template v-for="(item, index) in baziResult.yearCangGan.split(',')">
                <view :key="index" :style="fiveElementInfo(item)">{{
                  fiveElementTextInfo(item)
                }}</view>
              </template>
            </view>
          </view>
          <view class="tr-item">
            <view class="jx-sizhu" :style="fiveElementInfo(dizhi[1])">{{
              dizhi[1]
            }}</view>
            <view class="jx-type">
              <template v-for="(item, index) in baziResult.monthCangGan.split(',')">
                <view :key="index" :style="fiveElementInfo(item)">{{
                  fiveElementTextInfo(item)
                }}</view>
              </template>
            </view>
          </view>
          <view class="tr-item">
            <view class="jx-sizhu" :style="fiveElementInfo(dizhi[2])">{{
              dizhi[2]
            }}</view>
            <view class="jx-type">
              <template v-for="(item, index) in baziResult.dayCangGan.split(',')">
                <view :key="index" :style="fiveElementInfo(item)">{{
                  fiveElementTextInfo(item)
                }}</view>
              </template>
            </view>
          </view>
          <view class="tr-item tr-dizhi">
            <view class="jx-sizhu" :style="fiveElementInfo(dizhi[3])">{{
              dizhi[3]
            }}</view>
            <view class="jx-type">
              <template v-for="(item, index) in baziResult.timeCangGan.split(',')">
                <view :key="index" :style="fiveElementInfo(item)">{{
                  fiveElementTextInfo(item)
                }}</view>
              </template>
            </view>
          </view>
        </view>
      </view>
      <view class="progress-info">
        <my-progress
          :percentage="Math.round((baziResult.cgWuXingCountShiShen.fireCount / 8) * 100)"
          height="24"
          :showTips="false"
          activeColor="#C94400"
        ></my-progress>
        <view class="tips">
          <span class="fire">火</span>
          <span>{{ baziResult.cgWuXingCountShiShen.fireCount }}</span
          >个
          <span>{{ baziResult.cgWuXingCountShiShen.fireShiShen }}</span>
        </view>
        <my-progress
          :percentage="Math.round((baziResult.cgWuXingCountShiShen.earthCount / 8) * 100)"
          height="24"
          :showTips="false"
          activeColor="#926500"
        ></my-progress>
        <view class="tips">
          <span class="earth">土</span>
          <span>{{ baziResult.cgWuXingCountShiShen.earthCount }}</span
          >个
          <span>{{ baziResult.cgWuXingCountShiShen.earthShiShen }}</span>
        </view>
        <my-progress
          :percentage="Math.round((baziResult.cgWuXingCountShiShen.woodCount / 8) * 100)"
          height="24"
          :showTips="false"
          activeColor="#00BA7D"
        ></my-progress>
        <view class="tips">
          <span class="wood">木</span>
          <span>{{ baziResult.cgWuXingCountShiShen.woodCount }}</span
          >个
          <span>{{ baziResult.cgWuXingCountShiShen.woodShiShen }}</span>
        </view>
        <my-progress
          :percentage="Math.round((baziResult.cgWuXingCountShiShen.waterCount / 8) * 100)"
          height="24"
          :showTips="false"
          activeColor="#00BA7D"
        ></my-progress>
        <view class="tips">
          <span class="water">水</span>
          <span>{{ baziResult.cgWuXingCountShiShen.waterCount }}</span
          >个
          <span>{{ baziResult.cgWuXingCountShiShen.waterShiShen }}</span>
        </view>
        <my-progress
          :percentage="Math.round((baziResult.cgWuXingCountShiShen.metalCount / 8) * 100)"
          height="24"
          :showTips="false"
          activeColor="#ECAB47"
        ></my-progress>
        <view class="tips">
          <span class="metal">金</span>
          <span>{{ baziResult.cgWuXingCountShiShen.metalCount }}</span
          >个
          <span>{{ baziResult.cgWuXingCountShiShen.metalShiShen }}</span>
        </view>
      </view>
    </view>
    <!-- <view v-else>
      <no-vip></no-vip>
    </view> -->
  </bazi-section>
</template>
<script>
import { mapGetters } from "vuex";
import baziSection from "./section.vue";
import wuxingColor from "@/utils/wuxing.js";
export default {
  components: {
    baziSection,
  },
  props: {
    result: {
      type: Object,
      default: {},
    },
  },
  computed: {
    ...mapGetters({
      isVip: "user/isVip",
    }),
  },
  data() {
    return {
      baziResult: this.result,
      tiangan: [],
      dizhi: [],
      shizhu: ["时间", "年柱", "月柱", "日柱", "时柱"],
      unit: [
        {
          value: 0,
          text: "极弱",
        },
        {
          value: 25,
          text: "弱",
        },
        {
          value: 45,
          text: "偏弱",
        },
        {
          value: 55,
          text: "偏弱",
        },
        {
          value: 75,
          text: "强",
        },
        {
          value: 100,
          text: "极强",
        },
      ],
    };
  },
  mounted() {
    this.tiangan = [
      this.baziResult.yearGan,
      this.baziResult.monthGan,
      this.baziResult.dayGan,
      this.baziResult.timeGan,
    ];
    this.dizhi = [
      this.baziResult.yearZhi,
      this.baziResult.monthZhi,
      this.baziResult.dayZhi,
      this.baziResult.timeZhi,
    ];
  },
  methods: {
    // 对应五行信息
    fiveElementInfo(str) {
      let { color } = wuxingColor.getGanzhiWuxingColorInfo(str);
      return `color: ${color}`;
    },
    fiveElementTextInfo(str) {
      let { name } = wuxingColor.getGanzhiWuxingColorInfo(str);
      return name;
    },
  },
};
</script>

<style lang="scss" scoped>
.gongwei {
  width: 100%;
  box-sizing: border-box;
}

.section {
  width: 100%;
  height: 72rpx;
  color: white;
  background: #c5a680;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 10rpx 46rpx;

  .section-title {
    padding-right: 22rpx;
  }
}

.liuqin-containter {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32rpx 0;
}

.liuqin-table {
  width: 650rpx;
  margin: auto;

  .th {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;

    .th-item {
      width: 25%;
      white-space: nowrap;
      text-align: center;
      color: #2c2c2c;
      background-color: #e2dbd4;
      border: 2rpx solid #525252;
      margin: 0 -2rpx -2rpx 0;
      padding: 4rpx 0;
    }

    .th-item:first-child {
      border-radius: 4rpx 0 0 0;
      border: 2rpx solid #4b240d;
    }

    .th-item:last-child {
      border-radius: 0 4rpx 0 0;
      border: 2rpx solid #4b240d;
    }
  }

  .tr {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;

    .tr-item {
      width: 25%;
      display: flex;
      flex-direction: column;
      align-items: center;
      border: 2rpx solid #4b240d;
      margin: 0 -2rpx -2rpx 0;
      padding: 10rpx 0;
    }

    .tr-dizhi:first-child {
      border-radius: 0 0 0 10rpx;
      border: 2rpx solid #4b240d;
    }

    .tr-dizhi:last-child {
      border-radius: 0 0 10rpx 0;
      border: 2rpx solid #4b240d;
    }
  }
}

.jx-sizhu {
  color: #ffffff;

  font-size: 40rpx;
  padding: 6rpx;
}

.jx-self {
  color: #2c2c2c;
}

.jx-type {
  color: #787878;
  font-size: 24rpx;
  text-align: center;
}

.progress-info {
  display: flex;
  flex-direction: column;
  padding: 15rpx 48rpx;
}

.tips {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 4rpx 0;
  color: #787878;
  font-size: 20rpx;
}

.fire {
  font-weight: bold;
  color: #c94400;
  font-size: 26rpx;
}

.earth {
  font-weight: bold;
  color: #926500;
  font-size: 26rpx;
}

.wood {
  font-weight: bold;
  color: #00ba7d;
  font-size: 26rpx;
}

.water {
  font-weight: bold;
  color: #00ba7d;
  font-size: 26rpx;
}

.metal {
  font-weight: bold;
  color: #ecab47;
  font-size: 26rpx;
}
</style>
